<template>
    <div>
        <div class="loop-table">
            <div class="table-left">
                <h3>{{title}}</h3>

                <div class="table-search">
                    <slot></slot>
                </div>

                <el-table :data="proAmountList" :border="true" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                    <template v-for="(item,i) in proStatistics">
                        <el-table-column :key="i" :label="item.label" width="130" v-if="item.prop !=='guid'">
                            <template slot-scope="scope">
                                {{scope.row[item.prop]}}
                            </template>
                        </el-table-column>
                    </template>

                    <el-table-column label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" @click="clickHandler(scope.row)">查看具体分析</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <empty-list v-if="proAmountList.length == 0">
                    <span>暂无数据</span>
                </empty-list>
                <my-pagination class="pagination" ref="tableLeft" v-model="proAmountList" :action="`${$store.state.api.ecUrl}/echarts/gettender.json`"
                    :search="proPgdata" :auto-show="false" :text-align="'right'" :after-query="afterQuery"></my-pagination>

            </div>
        </div>

    </div>
</template>

<script>
import EmptyList from '@components/sys/empty-list';

export default {
    name: '',
    components: { EmptyList },
    props: {
        title: {
            typeof: String,
            default: '',
        },
        proPgdata: {
            type: Object,
            default: () => {},
        },
        action: {
            typeof: String,
            default: '',
        },
    },
    data() {
        return {
            proAmountList: [],
            proStatistics: {},
        };
    },
    mounted() {},
    methods: {
        afterQuery(rows, res) {
            this.proStatistics = res.statistics;
        },

        //下边表格 ，点击切换。
        clickTable() {
            this.$refs.tableLeft.queryData();
        },
        // 查看具体分析
        clickHandler(val) {
            this.$emit('clickHandler', val);
        },
    },
};
</script>

<style lang="scss" scoped>
.loop-table {
    h3 {
        margin-bottom: 15px;
    }
    .el-table {
        margin: 15px 0;
    }
    ::v-deep {
        .el-button--text {
            text-align: left;
            span {
                word-break: break-all;
                white-space: normal;
            }
        }
        .el-table__header {
            min-width: 100% !important;
        }
        .el-table__body {
            min-width: 100% !important;
        }
    }
}
</style>
